<template>
  <a-table :columns="columns" :data-source="tableData" class="list-wrap">
    <template #tags="{ text: tags }">
      <span>
        <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
    </template>
    <template #action="{ record }">
      <span>
        <a @click="funcOperate('view',record)">查看</a>
        <a-divider type="vertical" />
        <a @click="funcOperate('edit',record)">编辑</a>
        <a-divider type="vertical" />
          <a @click="funcOperate('doc',record)">文档</a>
        <a-divider type="vertical" />
        <a @click="funcOperate('delete',record)">删除</a>
        <a-divider type="vertical" />
      </span>
    </template>
  </a-table>
</template>

<script setup>
import {reactive, ref, toRefs, watch, onMounted, getCurrentInstance, defineComponent, useContext, computed} from 'vue';
import {storage} from "../../../utils/storage";
import {getLocalFunctions} from '../../../api/index.js'
const {emit } = useContext()

const funcOperate = (type,record)=>{
  emit('funcOperate',{
    type:type,
    record:record
  })
}
onMounted(()=>{
  getLocalFunctionsAndUpdateList()
})
const tableData = ref([])

/**
 * get functions
 *
 * get functions from local files
 * then save them to storage
 * then get functions from storage
 */
const getLocalFunctionsAndUpdateList  = async ()=>{
  await  getLocalFunctions()
  getStorageFunctions()
}
// get functions from storage
const getStorageFunctions = ()=>{
  const funcMap = storage.local.get('keyMap') || []
  const list = funcMap.map(item=>storage.local.get(item))
  list.forEach(item=>item.tags = '暂无')
  tableData.value = list
  console.log(tableData.value,'tableData')
}
// data for table column
const columns = [
  {
    title: '函数名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '说明',
    dataIndex: 'remark',
    key: 'remark',
  },
  {
    title: '标签',
    dataIndex: 'tags',
    slots: {
      customRender: 'tags',
    },
  },
  {
    title: '操作',
    key: 'action',
    slots: {
      customRender: 'action',
    },
  },
];


</script>

<style scoped lang="less">
.list-wrap {
  min-height: 350px;
  width: 100%;
}

</style>
